<!--
 @description 分配设计师
 @fileName Allocation.vue
 @author zengqiongying
 @created 2022/11/06 14:09:44
-->
<template>
  <div class="allocation-page" :class="{'page-has-bottom':selectedDataList.length>0}">
    <ComHeader title="分配设计师" bg-color="#FFFFFF" />
    <div class="allocation-head">
      <Cell title="建议分配" :value="detail.recommendDesigner" :right="false" />
      <Cell title="所属门店" :value="detail.shopDeptName" :right="false" />
      <div class="designer-search">
        <van-search
          v-model="searchValue"
          show-action
          class="search-field"
          placeholder="搜索姓名"
          @search="handleSearch"
          @cancel="handleSearch"
          @clear="handleSearch"
        >
          <template #action>
            <svg-icon class="icon-search" icon-class="sousuo-solid" @click.native.stop="handleSearch" />
          </template>
        </van-search>
      </div>
    </div>
    <div class="allocation-head-place" />
    <div v-if="selectedDataList.length>0" class="cus-fixed-bottom">
      <van-button type="primary" block round class="cus-btn-submit" @click="handlerConfirm">确定</van-button>
    </div>
    <div class="designer-list">
      <DesignerList
        v-if="shopDeptCode.length>0"
        ref="list"
        :search-value="searchValue"
        :dis-org-codes="[shopDeptCode]"
        :position-codes="['top_design_mg', 'top_designer']"
        :disabled-ids="designerIds"
        :show-customer-count="false"
        @select-change="handleDeignerChange"
      />
    </div>
  </div>
</template>

<script>
import Cell from '@/components/ListCell'
import DesignerList from '../components/EmployeeList'
import { bus } from '@/utils/bus'
import { assignDesigner, queryDesignerByOptyId } from '@/apis/customer'
import { getOptyDetail } from '@/apis/optyCategory'
export default {
  name: 'CustomerOptyAllocation',
  components: { Cell, DesignerList },
  filters: {},
  mixins: [],
  data() {
    return {
      optyId: this.$route.query.id, // 当前商机Id
      detail: '', // 商机详情
      formData: {
        clueCustomerId: '', // 线索客户Id
        optyId: '', // 商机ID
        saveUsers: null // 设计师
      },
      designerIds: [], // 当前商机原来选择的设计师ID
      searchValue: '',
      selectedDataList: []// 当前所选设计师
    }
  },

  computed: {
    shopDeptCode() {
      return this.detail && this.detail.shopDeptCode || ''
    }
  },

  created() {
    this.getDesigner()
    getOptyDetail(this.optyId).then(res => {
      this.detail = res.data || ''
    })
  },
  activated() {

  },

  mounted() {},

  methods: {
    getDesigner() {
      queryDesignerByOptyId(this.optyId).then(res => {
        const data = res.data || []
        this.designerIds = data.map(v => v.employeeId)
      })
    },
    handleDeignerChange(data) {
      this.selectedDataList = data.map(v => {
        return v
      })
    },
    handlerConfirm() {
      if (this.selectedDataList.length === 0) {
        this.$toast('请选择设计师!')
        return
      }
      const data = {
        clueCustomerId: this.detail.clueCustomerId,
        optyId: this.optyId,
        saveUsers: this.selectedDataList.map(e => {
          return {
            employeeId: e.id,
            employeeName: e.name,
            userAccount: e.account,
            userId: e.userId
          }
        })
      }
      assignDesigner(data).then(res => {
        this.$toast('操作成功')
        bus.$emit('refreshCustomerItem', {
          title: '分配跟进人',
          type: 'allocation',
          id: data.clueCustomerId
        })
        bus.$emit('refreshOptyItem', {
          title: '分配设计师',
          type: 'allocation',
          id: data.optyId
        })
        this.$router.go(-1)
      })
    },
    handleSearch() {
      if (!this.shopDeptCode) {
        this.$toast('所属门店组织编码异常')
        return
      }
      this.$nextTick(() => {
        this.$refs.list && this.$refs.list.resetPageData()
      })
    }
  }
}

</script>
<style lang='less' scoped>
.allocation-page{
  background: #fff;
}
.allocation-head-place{
  height: 180px;
}
.allocation-head{
  position: fixed;
  z-index: 9;
  left: 0;
  top: 46px;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.07);
  .designer-search{
    padding:16px;
    .search-field{
      background:rgba(241, 241, 242, 0.5);
      border-radius: 6px;
      height: 44px;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 10px;
    }
    /deep/.van-search__content{
      padding-left: 0;
      .van-field__left-icon{
        display: none;
      }
    }
    .icon-search{
      width: 20px;
      height: 20px;
      font-size: 20px;
      color: #16BC83;
    }
  }
}
.designer-list{
  position: relative;
  min-height: calc(100vh - 46px - 128px);
  padding: 0 16px;
}
.page-has-bottom .designer-list{
  padding-bottom: 80px;
}
</style>
